<template>
    <div class="student">
        <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{{ student.name }}</h2>
        <h2>年龄：{{ student.age }}</h2>
        <button @click="changName">修改姓名</button>
        <button @click="changAge">修改年龄</button>
        <button @click="changStudent">修改学生</button>
    </div>
</template>

<script setup lang="ts" name="Student">
    import { ref, watch } from 'vue'

    let student = ref({
        name: '张三',
        age: 25
    })
    //修改对象里属性的函数
    function changName(){
        student.value.name+="*"
    }
    function changAge(){
        student.value.age+=1
    }
    //修改对象的函数
    function changStudent(){
        let s1={
            name:"李四",
            age:25
        }
        student.value=s1;
    }
    /*
        情况二：监视【ref】定义的【对象类型】数据，监视的是地址值。对象发生变化的本质是地址值发生了变化。
        参数1-student：是被监听的数据
        参数2-箭头函数：是监视的回调函数
        参数3-{}：是要配置的对象
        deep:true 开启深度监视
        immediate:true 在最开始初始化对象的时候，就让回调函数执行一次。
    */
    let a=watch(student,(newValue,oldValue)=>{
        console.log("我们修改了student",newValue,oldValue);
        if(student.value.age>30){
            a();
        }
    },{deep:true,immediate:true})

    

</script>


<style scoped>
.student {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
